<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>纯粹爱 悦心田</title>

		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

		<script type="text/javascript">
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';
		</script>

		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<!--<script type="text/javascript">
			const siteUrl = "./",
				musicMp3 = "media/bgm.mp3"
		</script>-->
		<link rel="stylesheet" type="text/css" href="css/music.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />

	</head>

	<body>
		<audio id="dio" src="media/dio.mp3" preload="auto"></audio>
		<audio id="dou" src="media/dou.mp3" preload="auto"></audio>
		<audio id="po" src="media/po.mp3" preload="auto"></audio>
		<audio id="xiu" src="media/xiu.mp3" preload="auto"></audio>
		<audio id="magic" src="media/magic.mp3" preload="auto"></audio>
		<audio id="one" src="media/one.mp3" preload="auto"></audio>
		<audio id="jx" src="media/jx.mp3" preload="auto"></audio>

		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="page one">
						<img src="img/page_one.png" />
						<img class="page_one_shake animated shake infinite slow" src="img/page_one_shake.png" style="display: block;" />
						<img class="page_one_down animated fadeInDown" src="img/page_one_down.png" style="display: block;" />
						<img class="page_one_ghost animated linear flutter delay-1s" src="img/page_one_ghost.png" style="display: block;" />
						<img class="page_one_text animated bounceInDown fast delay-2s" src="img/page_one_text.png" style="display: block;" />
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page">
						<img class="page_two_oneday animated hinge slow delay-1s" src="img/page_two_oneday.png" />
						<img class="page_two_text1 animated slideInRight delay-2s" src="img/page_two_text1.png" />
						<img class="page_two_text2 animated slideInLeft delay-3s" src="img/page_two_text2.png" />
						<div class="page_two_text3 animated slideInRight delay-4s">
							<img src="img/page_two_text3.png" width="100%" style="margin-bottom: -55px;" />
							<img class="page_two_text3_1 animated bounceIn fast delay-5s" src="img/page_two_text3_1.png" style="left: 0.5rem;" />
						</div>
						<div class="page_pop animated delay-9s hideToShow faster">
							<img class="page_pop_bg animated delay-11s fadeOut faster" src="img/page_pop_bg.png" />
							<img class="page_pop_no animated delay-9s bigToSmall slow" src="img/page_pop_no.png" />
							<img class="page_pop_text1 animated delay-11s flipInY" src="img/page_pop_text1.png" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page">
						<img class="page_three_scene1 animated fadeIn" src="img/page_three_scene1.jpg" />
						<img class="page_three_s1t1 animated bounceIn delay-1s" src="img/page_three_s1t1.png" />
						<img class="page_three_s1t2 animated bounceIn delay-2s" src="img/page_three_s1t2.png" />
						<img class="page_three_s1t3 animated slideInLeft delay-3s" src="img/page_three_s1t3.png" />
						<img class="page_three_s1t4 animated slideInRight delay-4s" src="img/page_three_s1t4.png" />
						<img class="page_three_scene2 animated fadeIn delay-5s" src="img/page_three_scene2.png" />
						<img class="page_three_s2t1 animated bounceIn delay-6s" src="img/page_three_s2t1.png" />
						<img class="page_three_s2s animated fadeInDown delay-7s" src="img/page_three_s2s.png" />
						<div class="page_pop animated delay-11s hideToShow faster">
							<img class="page_pop_bg animated delay-13s fadeOut faster" src="img/page_pop_bg.png" />
							<img class="page_pop_no animated delay-11s bigToSmall slow" src="img/page_pop_no.png" />
							<img class="page_pop_text1 animated delay-13s flipInY" src="img/page_pop_text2.png" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page">
						<img class="page_four_text1 animated slideInRight" src="img/page_four_text1.png" />
						<img class="page_four_text2 animated jackInTheBox delay-1s" src="img/page_four_text2.png" />
						<img class="page_four_text3 animated flipInX delay-3s" src="img/page_four_text3.png" />
						<div class="page_pop animated delay-8s hideToShow faster">
							<img class="page_pop_bg animated delay-9s fadeOut faster" src="img/page_pop_bg.png" />
							<img class="page_pop_no animated delay-8s bigToSmall slow" src="img/page_pop_no.png" />
							<img class="page_pop_text3 animated delay-9s flipInY" src="img/page_pop_text3.png" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page five">
						<img class="page_five_phone animated rotateInUpRight" src="img/page_five_phone.png" />
						<img class="page_five_js animated bounceIn delay-2s" src="img/page_five_js.png" />
						<div class="page_pop black animated delay-4s hideToShow">
							<div class="how_save_me animated delay-5s slideInLeftR faster">
								<img class="animated delay-6s slideInLeft faster" src="img/who_save_img.png" width="100%" />
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping">
					<div class="page six">
						<div class="page_pop black" style="display: block;">
							<div class="page_six_ygbh_box">
								<img id="ygbh" class="animated swing infinite slow" src="img/page_six_ygbh_close.png" width="100%" />
								<div class="yghb_open">
									<img class="page_six_s1_text1_open animated fadeOut delay-2s" src="img/page_six_s1_text1_open.png" />
									<img class="page_six_s1_text2_open animated fadeIn delay-3s" src="img/page_six_s1_text2_open.png" />
									<img src="img/page_six_ygbh_open_cy.png" width="100%" />
									<img class="page_six_ygbh_open_light animated zoomInLarge slower delay-5s" src="img/page_six_ygbh_open_light.png" width="100%" />
								</div>
							</div>
						</div>
						<div id="white" class="page_pop white">
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page sun seven animated fadeIn slow">
						<img class="page_seven_light animated flashl lowest infinite" src="img/page_seven_light.png" />
						<div class="page_sun_bottom_box">
							<img class="animated slideInUp" src="img/page_sun_bottom_350.png" width="100%" />
							<img class="animated slideInLeft delay-1s" src="img/page_sun_bottom_text1.png" width="100%" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page sun eight animated fadeIn slow">
						<img class="page_eight_tree" src="img/page_eight_tree.png" />
						<img class="page_seven_light animated flashl lowest infinite" src="img/page_eight_light.png" />
						<div class="page_sun_bottom_box">
							<img class="animated slideInUp" src="img/page_sun_bottom_350.png" width="100%" />
							<img class="animated slideInLeft delay-1s" src="img/page_sun_bottom_text2.png" width="100%" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page sun nine animated fadeIn slow">
						<img class="page_nine_head1 animated swing lowest infinite" src="img/page_nine_head1.png" />
						<img class="page_nine_head2 animated swing lowest infinite delay-1s" src="img/page_nine_head2.png" />
						<div class="page_sun_bottom_box">
							<img class="animated slideInUp" src="img/page_sun_bottom_sq.png" width="100%" />
							<img class="animated slideInLeft delay-1s" src="img/page_sun_bottom_text3.png" width="100%" />
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page sun ten animated fadeIn slow">
						<img class="page_ten_light animated flashl lowest infinite" src="img/page_ten_light.png" />
						<div class="page_sun_bottom_box">
							<img class="animated slideInUp" src="img/page_sun_bottom_350.png" width="100%" />
							<img class="animated slideInLeft delay-1s" src="img/page_sun_bottom_text4.png" width="100%" />
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping">
					<div class="page violet">
						<!--<img src="img/heart.gif" width="100%"/>-->
						<button id="gotoLettery_demo" class="animated rollIn delay-3s"></button>
					</div>
				</div>
			</div>
		</div>

		<img class="next_page animated infinite bounce slower" src="img/nextpage_icon.png" style="display: block;" />

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			 * 注意！！！此功能仅作为微信开发工具测试使用，正式环境下必须注释！！！
			 * */
			//			$(document).click(function(e){
			//				mySwiper.slideNext();
			//			})
			/*
			 * 注意！！！此功能仅作为微信开发工具测试使用，正式环境下必须注释！！！
			 * */

			$('#ygbh').click(function(e) {
				$('#magic')[0].play();
				$('.page_six_ygbh_box').addClass('open');
				$(this).animate({
					opacity: 0
				}, 500);
				$('.yghb_open').show();
				$('.yghb_open').animate({
					opacity: 1
				}, 500);
				$('#white').addClass('animated delay-5s hideToShow slower');
				$('#white').show();
				setTimeout(function(e) {
					$('.page_six_ygbh_box').hide();
					mySwiper.slideNext();
					$('.next_page').show();
				}, 4000);
			})

			$('#gotoLettery').click(function(e) {
				window.location.href = 'lottery.html';
			})

			function sound(type,num){
				count ++;
				if(count >= num){
					clearInterval(timeRound);
					$('#'+type)[0].play();
				}
			}
			
			var timeRound = null;
			var count = 1;
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical', // 垂直切换选项
				height: $(window).height(),
				noSwiping: true,
				allowSlidePrev: false,
				on: {
					slideChangeTransitionStart: function(swiper) {
						//console.log(mySwiper.activeIndex);
						$(mySwiper.slides[mySwiper.activeIndex]).find('.animated').hide();
					},
					slideChangeTransitionEnd: function(swiper) {
						console.log(mySwiper.activeIndex);
						clearInterval(timeRound);
						switch(mySwiper.activeIndex) {
							case 1:
								$('#one')[0].pause();
								$('#dou')[0].play();
								break;
							case 2:
								$('#po')[0].play();
								break;
							case 3:
								$('#dio')[0].play();
								break;
							case 4:
								$('#po')[0].play();
								timeRound = setInterval(function(){
									sound('xiu',25);
								},100);
								break;
							case 6:
							case 7:
							case 8:
							case 9:
								$('#jx')[0].play();
								break;
							case 10:
								$('#xiu')[0].play();
								break;
						}

						if(mySwiper.activeIndex == 5 || mySwiper.activeIndex == 10) {
//							if(mySwiper.activeIndex == 4) {
//								setTimeout(function(e) {
//									mySwiper.slideNext();
//									$('.next_page').show();
//								}, 4000);
//							}
							if(mySwiper.activeIndex == 10) {
								$('.violet').append('<img src="img/heart.gif" width="100%"/>');
								setTimeout(function() {
									$('#gotoLettery_demo').hide();
									$('.violet').append("<button id='gotoLettery' class='animated pulse slow infinite delay-5s' style='display:block'></button>");
								}, 2500);
							}
							$('.next_page').hide();
							//document.addEventListener('touchmove', function(e) {e.preventDefault();});
						} else {
							$('.next_page').show();
							//document.removeEventListener('touchmove', function(e) {e.preventDefault();});
						}
						$(mySwiper.slides[mySwiper.activeIndex]).find('.animated').show();
					},
				},
			})

			$(document).ready(function(e) {
				$('.swiper-container').height($(window).height());
				$('#one')[0].play();
			})
		</script>
	</body>

</html>